<!--
 * @Author: C.
 * @Date: 2021-09-13 15:14:53
 * @LastEditTime: 2022-01-16 12:01:31
 * @Description: file content
-->
<template>
  <div class="table-sort-list">
    <div style="text-align: right; margin: 0">
      <div style="border-bottom: 1px solid #ccc">
        <el-checkbox v-model="tableProps.sortCol">
          序号列
        </el-checkbox>
        <el-checkbox
          v-model="tableProps.chooseCol"
          style="margin-right: 120px"
          >选择列</el-checkbox
        >
        <el-button size="mini" type="text">重置</el-button>
        <el-button size="mini" type="text" @click="Sure">确定</el-button>
      </div>
    </div>
    <div class="drag-box">
      <el-row
        :gutter="10"
        v-for="item in tableProps.tableSchema"
        :key="item.prop"
        class="drag-item"
      >
        <el-col :span="4">
          <div class="handle">
            <i class="el-icon-rank" style="font-size: 16px"></i>
            <el-checkbox
              v-model="item.show"
              style="padding: 0 8px"
              @change="checkboxChange"
            ></el-checkbox>
          </div>
        </el-col>
        <el-col :span="15">
          <div class="list-prop-name">{{ item.label }}</div>
        </el-col>
        <el-col :span="5">
          <div>
            <i
              class="el-icon-back"
              :class="{ 'active-fixed': item.fixed == 'left' }"
              @click="changeFixed(item, 'left')"
            ></i>
            <span style="color: #f4f4f4; padding: 0 5px">|</span>
            <i
              class="el-icon-right"
              :class="{ 'active-fixed': item.fixed == 'right' }"
              @click="changeFixed(item, 'right')"
            ></i>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import Sortable from "sortablejs";
export default {
  props: {
    tableProps: {
      type: Object,
      default: () => {},
    },
  },
  methods: {
    //确定按钮缓存table
    Sure(){
      let newTableData = {}
      let varTableData = {}
      let oldTableData = {}
      oldTableData = JSON.parse(window.localStorage.getItem('tableConfig'))
      //判断缓存里面有没有当前单据的缓存，有的话更新，没有的话赋新值
      if(oldTableData&&oldTableData[this.tableProps.printMod]){
        oldTableData[this.tableProps.printMod]=this.tableProps.tableSchema
        newTableData= oldTableData
      }else {
        varTableData[this.tableProps.printMod]= this.tableProps.tableSchema
        newTableData=Object.assign({}, varTableData, JSON.parse(window.localStorage.getItem('tableConfig')))
      }
      localStorage.setItem("tableConfig", JSON.stringify(newTableData));
    },
    changeFixed(item, type) {
      if (item.fixed == type) {
        item.fixed = false;
      } else {
        item.fixed = type;
      }

    },
    reRender() {
      this.$emit("rerender");
    },
    checkboxChange(e) {
      if (e) {
        this.reRender();
      }
      this.Sure()
    },
  },
  mounted() {
    const tbody = document.querySelector(".table-sort-list .drag-box");
    const _this = this;
    new Sortable(tbody, {
      handle: ".handle", // handle's class
      draggable: ".drag-item",
      animation: 150,
      onEnd({ newIndex, oldIndex }) {
        const currRow = _this.tableProps.tableSchema.splice(oldIndex, 1)[0];
        _this.tableProps.tableSchema.splice(newIndex, 0, currRow);
        _this.reRender();
        _this.Sure()
      },
    });
  },

};
</script>

<style lang="scss">
.table-sort-list {
  padding-top: 3px;
  width: 370px;
  .drag-box {
    min-height: 100px;
    max-height: 150px;
    overflow: auto;
    .drag-item {
      width: 100%;
      font-size: 15px;
      color: black;
    }
  }

  .list-prop-name {
    width: 240px;
    display: inline-block;
  }
  .active-fixed {
    color: #409eff;
  }
}
</style>
